<template>
  <basic-container v-loading="loading">
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div
        class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
        @click="goBack"
      >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content">发票详情</div>
    </div>
    <section class="haruyuki-bg-color-white haruyuki-padding">
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ labelData.basicTitle }}</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="24">
            <span>交易金额：{{ basicData.rptAmount }}</span>
          </el-col>
          <el-col :span="8">
            <span>订单类型：{{ basicData.rptTradeTypeName }}</span>
          </el-col>
          <el-col :span="8">
            <span>交易方式：{{ basicData.rptPayTypeName }}</span>
          </el-col>
          <el-col :span="8">
            <span>商户编号：{{ basicData.rpiNo }}</span>
          </el-col>
          <el-col :span="8">
            <span>通道商户编号：{{ basicData.aisleRpiNo }}</span>
          </el-col>
          <el-col :span="8">
            <span>支付订单编号：{{ basicData.rptAisleOrderCode }}</span>
          </el-col>
          <el-col :span="8">
            <span>商户名称：{{ basicData.rpiName }}</span>
          </el-col>
          <el-col :span="8">
            <span>官方订单编号：{{ basicData.rptOtherPayCode }}</span>
          </el-col>
          <el-col :span="8">
            <span>交易日期：{{ basicData.rptPayTime }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="haruyuki-flex-space-between haruyuki-align-items-center">
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-postcard"></i
          ><span class="haruyuki-ml-6">{{ labelData.mainTitle }}</span>
        </div>
      </div>
      <div class="haruyuki-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>发票类型：{{ basicData.invoiceTypeName }}</span>
          </el-col>
          <el-col :span="8">
            <span>发票种类：{{ basicData.invoiceWayName }}</span>
          </el-col>
          <el-col :span="8">
            <span>上传成功：{{ basicData.uploadStatusName }}</span>
          </el-col>
          <el-col :span="8">
            <span>发票编号：{{ basicData.invoiceCode }}</span>
          </el-col>
          <el-col :span="8">
            <span>购方名称：{{ basicData.taxpayerName }}</span>
          </el-col>
          <el-col :span="8">
            <span>纳税人识别代码：{{ basicData.taxpayerNo }}</span>
          </el-col>
          <el-col :span="8">
            <span>是否换开：{{ basicData.isChangeName }}</span>
          </el-col>
          <el-col :span="8">
            <span>开票日期：{{ basicData.invoiceCompleteTime }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="haruyuki-flex-center">
        <el-button
          size="small"
          type="danger"
          v-if="basicData.processLv === 7"
          @click.stop="handleRefund"
          >确认退款红冲</el-button
        >
      </div>
    </section>
    <el-dialog
    class="el-dialog__wrapper avue-dialog avue-crud__dialog"
      title="退款"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogRefundVisible"
    >
      <avue-form
        ref="serveForm"
        :option="refundOption"
        v-model="refundForm"
        @submit="refundSubmit"
      ></avue-form>
    </el-dialog>
    <!-- 二级密码 -->
    <el-dialog
    class="el-dialog__wrapper avue-dialog avue-crud__dialog"
      title="二级密码"
      append-to-body
      width="440px"
      :close-on-click-modal="false"
      v-if="twoPwdShow"
      :visible.sync="twoPwdShow"
      :before-close="handleCloseTwoPwd"
    >
      <el-form
        :model="towPwdForm"
        ref="towPwdForm"
        label-width="0"
        class="demo-ruleForm"
      >
        <el-form-item
          label=""
          prop="towPwd"
          :rules="[
            {
              required: true,
              message: '二级密码不能为空',
              trigger: ['blur', 'change'],
            },
            {
              pattern: /^[0-9]{6}$/,
              message: '二级密码由6位数字组成',
              trigger: ['blur', 'change'],
            },
          ]"
        >
          <el-input
            show-password
            v-model.number="towPwdForm.towPwd"
            autocomplete="off"
            placeholder="输入二级密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="avue-dialog__footer avue-dialog__footer--right">
        <el-button type="primary" @click="twoPwdSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import { getDetail } from "@/api/rb-merchant/payinvoice/payinvoice";
import { refundOrder } from "@/api/rb-merchant/dealManagement/dealManagement";
import { mapGetters } from "vuex";
import md5 from "js-md5";

export default {
  components: {},
  data() {
    return {
      loading: false,
      labelData: {
        basicTitle: "交易信息",
        mainTitle: "发票信息",
      },
      basicData: {
        rptAmount: "",
        rptTradeTypeName: "",
        rptPayTypeName: "",
        rpiNo: "",
        aisleRpiNo: "",
        rptAisleOrderCode: "",
        rpiName: "",
        rptOtherPayCode: "",
        rptPayTime: "",
        invoiceTypeName: "",
        invoiceWayName: "",
        uploadStatusName: "",
        invoiceCode: "",
        taxpayerName: "",
        taxpayerNo: "",
        isChangeName: "",
        invoiceCompleteTime: "",
      },
      basicForm: {},
      hasPayPwd: false,
      twoPwdShow: false,
      towPwdForm: {
        towPwd: "",
      },
      dialogRefundVisible: false,
      refundForm: {},
      refundOption: {
        calcHeight: 30,
        tip: false,
        border: true,
        index: true,
        refreshBtn: false,
        column: [
          {
            label: "退款金额",
            prop: "refundAmount",
            type: "input",
            value: null,
            dataType: "number",
            rules: [
              {
                required: true,
                message: "请输入退款金额",
                trigger: "blur",
              },
            ],
          },
          {
            label: "退款理由",
            prop: "refundReason",
            type: "textarea",
            span: 24,
            minRows: 2,
            rules: [
              {
                required: true,
                message: "请输入退款理由",
                trigger: "blur",
              },
            ],
          },
        ],
      },
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["permission", "selectMer"]),
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    exhibition() {
      return (val) => {
        if (val == "" || val == "-1") {
          return (val = 0);
        } else {
          return val;
        }
      };
    },
  },
  created() {
    this.infoData();
  },
  methods: {
    // 二级密码 关闭回调
    handleCloseTwoPwd(done) {
      this.towPwdForm.towPwd = "";
      done();
    },
    // 二级密码 确定
    twoPwdSubmit() {
      let _that = this;
      this.$refs.towPwdForm.validate((valid) => {
        if (valid) {
          refundOrder({
            orderCode: _that.tradeInfo.rptOrderCode,
            ..._that.refundForm,
            payPwd: md5(_that.towPwdForm.towPwd + ""),
          }).then(
            () => {
              _that.twoPwdShow = false;
              _that.towPwdForm.towPwd = "";
              _that.dialogRefundVisible = false;
              _that.$message({
                type: "success",
                message: "退款成功!",
              });
              _that.$refs.serveForm.resetForm();
              _that.infoData();
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    /* 退款 dialog */
    handleRefund() {
      const column = this.findObject(this.refundOption.column, "refundAmount");
      column.value = this.basicData.rptAmount;
      column.disabled = true;
      this.dialogRefundVisible = true;
    },
    /* 提交 退款金额 */
    refundSubmit(row, done) {
      if (this.hasPayPwd) {
        this.twoPwdShow = true;
        done();
      } else {
        this.$confirm("请您先设置二级密码，再操作！", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warning",
        }).then(() => {
          this.$router.push({ path: "/info/index", query: { index: 2 } });
        });
      }
    },
    /* 页面加载 初始化请求详情接口 */
    infoData() {
      this.loading = true;
      getDetail(this.selectMer.rptAisleOrderCode).then((res) => {
        this.loading = false;
        this.basicData = res.data.data;
      });
    },
    /**
     * @func 返回页面
     * @desc 返回页面 goBack
     * */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-transfer-panel__list.is-filterable {
  width: 400px !important;
  height: 500px !important;
}

/deep/.el-transfer-panel {
  width: 400px !important;
  height: 500px !important;
}

.picture-preview {
  color: #409eff;
  cursor: pointer;
}

.haruyuki-image-preview {
  width: 260px;
}

.image-preview-title {
  // text-align: center;
  margin-bottom: 10px;
}

.haruyuki-image-preview .haruyuki-image .el-image {
  border-radius: 10px;
}

/deep/ .el-image__error {
  background: #fff;
}

.infoWrap_line {
  display: flex;
  align-items: center;
  padding-bottom: 30px;

  .info_line_span {
    width: 160px;
    text-align: right;
  }
}

.nullData {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

.w100 {
  width: calc(100% - 160px);
}

.btnCode {
  width: 100px;
  border-radius: 0;
  padding: 0;
  margin: 10px 0;
  background: #409eff !important;
}

.btnCode:hover {
  padding: 0;
  border: none;
  background: #409eff !important;
}

/deep/ .el-input-group__append {
  background: #409eff !important;
  color: #fff !important;
  padding: 0;
}

.icons-box {
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  &.adaptive {
    width: 100%;
    margin-left: -10px;
    margin-right: -10px;
  }
  .icons-item-content {
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);
    span {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
    }
  }
  .icons-icon-func {
    width: calc(100% / 6);
    margin-bottom: 20px;
    text-align: center;
    .cursor {
      cursor: pointer;
    }
  }
  .icons-icon-card {
    width: calc(100% / 4);
    .item-card {
      // display: flex;
      border-radius: 10px;
      background-color: #ffffff;
      padding: 20px;
      text-align: center;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      .item-card-label {
        display: flex;
        align-items: center;
      }
      .item-card-content {
        display: flex;
        align-items: center;
        margin-top: 20px;
      }
    }
  }
}
</style>